# Compound Components

<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/compound-components" />

👨‍💼 In this exercise we're going to make `<Toggle />` the parent of a few
compound components:

- `<ToggleOn />` renders children when the `on` state is `true`
- `<ToggleOff />` renders children when the `on` state is `false`
- `<ToggleButton />` renders the `<Switch />` with the `on` prop set to the `on`
  state and the `onClick` prop set to `toggle`.

We have a Toggle component that manages the state, and we want to render
different parts of the UI however we want. We want control over the presentation
of the UI.

🦉 The fundamental challenge you face with an API like this is the state shared
between the components is implicit, meaning that the developer using your
component cannot actually see or interact with the state (`on`) or the
mechanisms for updating that state (`toggle`) that are being shared between the
components.

So in this exercise, we'll solve that problem by using the 📜
[React Context API](https://react.dev/reference/react/use#reading-context-with-use)!

What we want to do in this exercise is allow users of our component to render
something when the toggle button is on and to render something else when that
toggle button is off without troubling them with managing the state that's
controlling whether it's shown or not.

Your job will be to make a `ToggleContext` which will be used to implicitly
share the state between these components. The `Toggle` component will render the
`ToggleContext` and the other compound components will access that
implicit state via `use(ToggleContext)`.

🦺 TypeScript might not like your `use` call depending on how you set up your
context. We'll deal with this in another step.
